<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文心雕龙 - AI创意写作平台</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #6b8cae;
            --accent-color: #ff7e5f;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Serif SC', serif;
            background-color: #f5f7fa;
            color: var(--dark-color);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 20px 0;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 L0,100 Z" /></svg>');
            opacity: 0.1;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }
        
        .logo {
            font-size: 2rem;
            font-weight: 700;
            display: flex;
            align-items: center;
        }
        
        .logo-icon {
            margin-right: 10px;
            font-size: 2.5rem;
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 20px;
        }
        
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            padding: 8px 12px;
            border-radius: 4px;
            transition: var(--transition);
        }
        
        nav ul li a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        .main {
            padding: 40px 0;
        }
        
        .page {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .page.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 30px;
            margin-bottom: 30px;
            transition: var(--transition);
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .card-title {
            font-size: 1.5rem;
            color: var(--primary-color);
        }
        
        .card-icon {
            font-size: 2rem;
            color: var(--accent-color);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: inherit;
            font-size: 1rem;
            transition: var(--transition);
        }
        
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
        }
        
        textarea {
            min-height: 150px;
            resize: vertical;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .btn:hover {
            background-color: #3a5a8c;
            transform: translateY(-2px);
        }
        
        .btn-accent {
            background-color: var(--accent-color);
        }
        
        .btn-accent:hover {
            background-color: #e66a4a;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
        }
        
        .btn-outline:hover {
            background-color: rgba(74, 111, 165, 0.1);
        }
        
        .result-container {
            margin-top: 30px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 4px;
            border-left: 4px solid var(--primary-color);
        }
        
        .result-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: var(--primary-color);
        }
        
        .history-item {
            padding: 15px;
            margin-bottom: 10px;
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .history-item:hover {
            background-color: #f8f9fa;
        }
        
        .history-title {
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .history-preview {
            color: #666;
            font-size: 0.9rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .history-date {
            font-size: 0.8rem;
            color: #999;
            margin-top: 5px;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        
        .feature-card {
            background-color: white;
            border-radius: 8px;
            padding: 25px;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            cursor: pointer;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }
        
        .feature-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: var(--primary-color);
        }
        
        .feature-desc {
            color: #666;
            font-size: 0.9rem;
        }
        
        .welcome-section {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .welcome-title {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }
        
        .welcome-subtitle {
            font-size: 1.2rem;
            color: #666;
            max-width: 700px;
            margin: 0 auto 30px;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .spinner {
            width: 40px;
            height: 40px;
            margin: 0 auto 15px;
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-left-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 30px 0;
            text-align: center;
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .footer-links {
            display: flex;
            list-style: none;
        }
        
        .footer-links li {
            margin-left: 20px;
        }
        
        .footer-links a {
            color: white;
            text-decoration: none;
            transition: var(--transition);
        }
        
        .footer-links a:hover {
            color: var(--accent-color);
        }
        
        .copyright {
            opacity: 0.8;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                text-align: center;
            }
            
            nav ul {
                margin-top: 20px;
                justify-content: center;
            }
            
            nav ul li {
                margin: 0 10px;
            }
            
            .welcome-title {
                font-size: 2rem;
            }
            
            .footer-content {
                flex-direction: column;
            }
            
            .footer-links {
                margin-top: 20px;
                justify-content: center;
            }
            
            .footer-links li {
                margin: 0 10px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container header-content">
            <div class="logo">
                <span class="logo-icon">✍️</span>
                <span>文心雕龙</span>
            </div>
            <nav>
                <ul>
                    <li><a href="#" class="nav-link" data-page="home">首页</a></li>
                    <li><a href="#" class="nav-link" data-page="essay">生成作文</a></li>
                    <li><a href="#" class="nav-link" data-page="acrostic">藏头诗</a></li>
                    <li><a href="#" class="nav-link" data-page="polish">文字润色</a></li>
                    <li><a href="#" class="nav-link" data-page="expand">文字扩写</a></li>
                    <li><a href="#" class="nav-link" data-page="history">历史记录</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <main class="main">
        <div class="container">
            <!-- 首页 -->
            <div id="home" class="page active">
                <section class="welcome-section">
                    <h1 class="welcome-title">AI 创意写作助手</h1>
                    <p class="welcome-subtitle">文心雕龙平台为您提供强大的AI写作辅助功能，包括作文生成、藏头诗创作、文字润色和扩写，让您的文字表达更加精彩动人。</p>
                    <button class="btn btn-accent">开始创作</button>
                </section>
                
                <section>
                    <h2>核心功能</h2>
                    <div class="features-grid">
                        <div class="feature-card" data-page="essay">
                            <div class="feature-icon">📝</div>
                            <h3 class="feature-title">生成作文</h3>
                            <p class="feature-desc">根据主题和关键词自动生成结构完整、内容丰富的文章</p>
                        </div>
                        <div class="feature-card" data-page="acrostic">
                            <div class="feature-icon">🌸</div>
                            <h3 class="feature-title">藏头诗</h3>
                            <p class="feature-desc">输入藏头文字，生成意境优美、韵律和谐的诗歌</p>
                        </div>
                        <div class="feature-card" data-page="polish">
                            <div class="feature-icon">✨</div>
                            <h3 class="feature-title">文字润色</h3>
                            <p class="feature-desc">提升语言表达的准确性和优美度，让文字更加生动</p>
                        </div>
                        <div class="feature-card" data-page="expand">
                            <div class="feature-icon">📚</div>
                            <h3 class="feature-title">文字扩写</h3>
                            <p class="feature-desc">对简短内容进行扩展，增加细节和深度，丰富文章内容</p>
                        </div>
                    </div>
                </section>
            </div>
            
            <!-- 生成作文 -->
            <div id="essay" class="page">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">生成作文</h2>
                        <span class="card-icon">📝</span>
                    </div>
                    <form id="essay-form">
                        <div class="form-group">
                            <label for="essay-topic">作文主题</label>
                            <input type="text" id="essay-topic" placeholder="例如：我的梦想、环境保护的重要性..." required>
                        </div>
                        <div class="form-group">
                            <label for="essay-keywords">关键词（可选，用逗号分隔）</label>
                            <input type="text" id="essay-keywords" placeholder="例如：创新,科技,未来">
                        </div>
                        <div class="form-group">
                            <label for="essay-style">写作风格</label>
                            <select id="essay-style">
                                <option value="formal">正式</option>
                                <option value="casual">随意</option>
                                <option value="academic">学术</option>
                                <option value="literary">文学</option>
                                <option value="persuasive">说服性</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="essay-length">文章长度</label>
                            <select id="essay-length">
                                <option value="short">简短（300字左右）</option>
                                <option value="medium" selected>中等（500字左右）</option>
                                <option value="long">较长（800字左右）</option>
                            </select>
                        </div>
                        <button type="submit" class="btn">生成作文</button>
                    </form>
                    
                    <div class="loading" id="essay-loading">
                        <div class="spinner"></div>
                        <p>AI正在创作中，请稍候...</p>
                    </div>
                    
                    <div class="result-container" id="essay-result" style="display: none;">
                        <h3 class="result-title">生成的作文</h3>
                        <div id="essay-output"></div>
                        <button class="btn btn-outline" id="save-essay" style="margin-top: 15px;">保存到历史记录</button>
                    </div>
                </div>
            </div>
            
            <!-- 藏头诗 -->
            <div id="acrostic" class="page">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">藏头诗生成</h2>
                        <span class="card-icon">🌸</span>
                    </div>
                    <form id="acrostic-form">
                        <div class="form-group">
                            <label for="acrostic-text">藏头文字（最多8个字）</label>
                            <input type="text" id="acrostic-text" placeholder="例如：春暖花开" maxlength="8" required>
                        </div>
                        <div class="form-group">
                            <label for="acrostic-style">诗歌风格</label>
                            <select id="acrostic-style">
                                <option value="classical">古典</option>
                                <option value="modern">现代</option>
                                <option value="romantic">浪漫</option>
                                <option value="free">自由诗</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="acrostic-theme">主题（可选）</label>
                            <input type="text" id="acrostic-theme" placeholder="例如：爱情、自然、思乡...">
                        </div>
                        <button type="submit" class="btn">生成藏头诗</button>
                    </form>
                    
                    <div class="loading" id="acrostic-loading">
                        <div class="spinner"></div>
                        <p>AI正在创作诗歌，请稍候...</p>
                    </div>
                    
                    <div class="result-container" id="acrostic-result" style="display: none;">
                        <h3 class="result-title">生成的藏头诗</h3>
                        <div id="acrostic-output" style="white-space: pre-line; font-family: 'Noto Serif SC', serif; line-height: 2;"></div>
                        <button class="btn btn-outline" id="save-acrostic" style="margin-top: 15px;">保存到历史记录</button>
                    </div>
                </div>
            </div>
            
            <!-- 文字润色 -->
            <div id="polish" class="page">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">文字润色</h2>
                        <span class="card-icon">✨</span>
                    </div>
                    <form id="polish-form">
                        <div class="form-group">
                            <label for="polish-text">需要润色的文字</label>
                            <textarea id="polish-text" placeholder="请输入需要润色的文字内容..." required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="polish-style">润色风格</label>
                            <select id="polish-style">
                                <option value="concise">简洁明了</option>
                                <option value="elegant">优雅优美</option>
                                <option value="professional">专业正式</option>
                                <option value="vivid">生动形象</option>
                            </select>
                        </div>
                        <button type="submit" class="btn">润色文字</button>
                    </form>
                    
                    <div class="loading" id="polish-loading">
                        <div class="spinner"></div>
                        <p>AI正在润色文字，请稍候...</p>
                    </div>
                    
                    <div class="result-container" id="polish-result" style="display: none;">
                        <h3 class="result-title">润色后的文字</h3>
                        <div id="polish-output"></div>
                        <button class="btn btn-outline" id="save-polish" style="margin-top: 15px;">保存到历史记录</button>
                    </div>
                </div>
            </div>
            
            <!-- 文字扩写 -->
            <div id="expand" class="page">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">文字扩写</h2>
                        <span class="card-icon">📚</span>
                    </div>
                    <form id="expand-form">
                        <div class="form-group">
                            <label for="expand-text">需要扩写的文字</label>
                            <textarea id="expand-text" placeholder="请输入需要扩写的文字内容..." required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="expand-direction">扩写方向</label>
                            <select id="expand-direction">
                                <option value="details">增加细节描写</option>
                                <option value="examples">添加事例说明</option>
                                <option value="arguments">扩充论点论据</option>
                                <option value="emotional">增强情感表达</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="expand-length">扩写长度</label>
                            <select id="expand-length">
                                <option value="short">简短扩写（约1.5倍）</option>
                                <option value="medium" selected>中等扩写（约2倍）</option>
                                <option value="long">大幅扩写（约3倍）</option>
                            </select>
                        </div>
                        <button type="submit" class="btn">扩写文字</button>
                    </form>
                    
                    <div class="loading" id="expand-loading">
                        <div class="spinner"></div>
                        <p>AI正在扩写文字，请稍候...</p>
                    </div>
                    
                    <div class="result-container" id="expand-result" style="display: none;">
                        <h3 class="result-title">扩写后的文字</h3>
                        <div id="expand-output"></div>
                        <button class="btn btn-outline" id="save-expand" style="margin-top: 15px;">保存到历史记录</button>
                    </div>
                </div>
            </div>
            
            <!-- 历史记录 -->
            <div id="history" class="page">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">历史记录</h2>
                        <span class="card-icon">🕰️</span>
                    </div>
                    <div id="history-list">
                        <p>暂无历史记录，开始创作后您的内容将保存在这里。</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <footer>
        <div class="container footer-content">
            <div class="copyright">© 2025 文心雕龙 AI写作平台</div>
            <ul class="footer-links">
                <li><a href="#">关于我们</a></li>
                <li><a href="#">隐私政策</a></li>
                <li><a href="#">使用条款</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
    </footer>

    <script>
        // DeepSeek API 配置
        const DEEPSEEK_API_KEY = 'sk-c6a7fb0a88f04c45a858716ce9aec15c';
        const DEEPSEEK_API_URL = 'https://api.deepseek.com/v1/chat/completions';
        
        // 页面导航
        document.querySelectorAll('.nav-link, .feature-card').forEach(element => {
            element.addEventListener('click', function(e) {
                e.preventDefault();
                const pageId = this.getAttribute('data-page');
                showPage(pageId);
            });
        });
        
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            // 显示选中的页面
            document.getElementById(pageId).classList.add('active');
            
            // 更新导航栏活动状态
            document.querySelectorAll('.nav-link').forEach(link => {
                link.style.fontWeight = link.getAttribute('data-page') === pageId ? 'bold' : 'normal';
            });
            
            // 如果是历史记录页面，刷新显示
            if (pageId === 'history') {
                displayHistory();
            }
            
            // 滚动到顶部
            window.scrollTo(0, 0);
        }
        
        // 调用DeepSeek API
        async function callDeepSeekAPI(messages, maxTokens = 1000) {
            try {
                const response = await fetch(DEEPSEEK_API_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${DEEPSEEK_API_KEY}`
                    },
                    body: JSON.stringify({
                        model: 'deepseek-chat',
                        messages: messages,
                        max_tokens: maxTokens,
                        temperature: 0.7
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`API请求失败: ${response.status}`);
                }
                
                const data = await response.json();
                return data.choices[0].message.content;
            } catch (error) {
                console.error('调用DeepSeek API出错:', error);
                throw error;
            }
        }
        
        // 初始化各表单
        setupEssayForm();
        setupAcrosticForm();
        setupPolishForm();
        setupExpandForm();
        
        // 设置作文生成表单
        function setupEssayForm() {
            const form = document.getElementById('essay-form');
            const loading = document.getElementById('essay-loading');
            const result = document.getElementById('essay-result');
            const output = document.getElementById('essay-output');
            const saveBtn = document.getElementById('save-essay');
            
            form.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                // 显示加载状态
                loading.style.display = 'block';
                result.style.display = 'none';
                
                try {
                    const topic = form.querySelector('#essay-topic').value;
                    const keywords = form.querySelector('#essay-keywords').value;
                    const style = form.querySelector('#essay-style').value;
                    const length = form.querySelector('#essay-length').value;
                    
                    // 根据长度设置token数量
                    let maxTokens = 500;
                    if (length === 'short') maxTokens = 300;
                    if (length === 'long') maxTokens = 800;
                    
                    // 构建提示词
                    let prompt = `请根据以下要求写一篇作文：
主题：${topic}`;
                    
                    if (keywords) {
                        prompt += `\n关键词：${keywords}`;
                    }
                    
                    prompt += `\n写作风格：${style}`;
                    prompt += `\n字数要求：${length === 'short' ? '300字左右' : length === 'medium' ? '500字左右' : '800字左右'}`;
                    prompt += `\n要求：结构完整，逻辑清晰，语言流畅，符合指定的写作风格。`;
                    
                    // 调用API
                    const generatedEssay = await callDeepSeekAPI([
                        { role: 'system', content: '你是一位优秀的写作助手，擅长根据用户要求创作各种类型的文章。' },
                        { role: 'user', content: prompt }
                    ], maxTokens);
                    
                    // 显示结果
                    output.innerHTML = generatedEssay;
                    loading.style.display = 'none';
                    result.style.display = 'block';
                    
                    // 设置保存按钮
                    saveBtn.onclick = () => {
                        saveToHistory('作文', `作文：${topic}`, generatedEssay);
                    };
                    
                    // 滚动到结果
                    result.scrollIntoView({ behavior: 'smooth' });
                } catch (error) {
                    loading.style.display = 'none';
                    output.innerHTML = `<p style="color: var(--danger-color);">生成作文时出错: ${error.message}</p>`;
                    result.style.display = 'block';
                }
            });
        }
        
        // 设置藏头诗表单
        function setupAcrosticForm() {
            const form = document.getElementById('acrostic-form');
            const loading = document.getElementById('acrostic-loading');
            const result = document.getElementById('acrostic-result');
            const output = document.getElementById('acrostic-output');
            const saveBtn = document.getElementById('save-acrostic');
            
            form.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                // 显示加载状态
                loading.style.display = 'block';
                result.style.display = 'none';
                
                try {
                    const text = form.querySelector('#acrostic-text').value;
                    const style = form.querySelector('#acrostic-style').value;
                    const theme = form.querySelector('#acrostic-theme').value;
                    
                    // 构建提示词
                    let prompt = `请创作一首藏头诗，具体要求如下：
藏头文字：${text}
诗歌风格：${style}`;
                    
                    if (theme) {
                        prompt += `\n主题：${theme}`;
                    }
                    
                    prompt += `\n要求：每行诗的开头必须是藏头文字中的一个字，顺序不能改变。`;
                    prompt += `诗歌要符合指定的风格，意境优美，韵律和谐。`;
                    
                    // 调用API
                    const generatedPoem = await callDeepSeekAPI([
                        { role: 'system', content: '你是一位诗人，擅长创作各种风格的诗歌，特别是藏头诗。' },
                        { role: 'user', content: prompt }
                    ], 500);
                    
                    // 显示结果
                    output.innerHTML = generatedPoem;
                    loading.style.display = 'none';
                    result.style.display = 'block';
                    
                    // 设置保存按钮
                    saveBtn.onclick = () => {
                        saveToHistory('藏头诗', `藏头诗：${text}`, generatedPoem);
                    };
                    
                    // 滚动到结果
                    result.scrollIntoView({ behavior: 'smooth' });
                } catch (error) {
                    loading.style.display = 'none';
                    output.innerHTML = `<p style="color: var(--danger-color);">生成藏头诗时出错: ${error.message}</p>`;
                    result.style.display = 'block';
                }
            });
        }
        
        // 设置文字润色表单
        function setupPolishForm() {
            const form = document.getElementById('polish-form');
            const loading = document.getElementById('polish-loading');
            const result = document.getElementById('polish-result');
            const output = document.getElementById('polish-output');
            const saveBtn = document.getElementById('save-polish');
            
            form.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                // 显示加载状态
                loading.style.display = 'block';
                result.style.display = 'none';
                
                try {
                    const originalText = form.querySelector('#polish-text').value;
                    const style = form.querySelector('#polish-style').value;
                    
                    // 构建提示词
                    let prompt = `请对以下文字进行润色：
原文：
${originalText}

润色要求：
风格：${style}
要求：保持原意的同时，提升语言表达的准确性和优美度，使文字更加${style === 'concise' ? '简洁明了' : style === 'elegant' ? '优雅优美' : style === 'professional' ? '专业正式' : '生动形象'}。`;
                    
                    // 调用API
                    const polishedText = await callDeepSeekAPI([
                        { role: 'system', content: '你是一位专业的文字编辑，擅长对文本进行润色和优化。' },
                        { role: 'user', content: prompt }
                    ], 1000);
                    
                    // 显示结果
                    output.innerHTML = `<div style="margin-bottom: 20px;">
                        <h4>原文：</h4>
                        <p style="color: #666;">${originalText}</p>
                    </div>
                    <div>
                        <h4>润色后：</h4>
                        <p>${polishedText}</p>
                    </div>`;
                    loading.style.display = 'none';
                    result.style.display = 'block';
                    
                    // 设置保存按钮
                    saveBtn.onclick = () => {
                        saveToHistory('润色', `文字润色：${originalText.substring(0, 20)}...`, polishedText);
                    };
                    
                    // 滚动到结果
                    result.scrollIntoView({ behavior: 'smooth' });
                } catch (error) {
                    loading.style.display = 'none';
                    output.innerHTML = `<p style="color: var(--danger-color);">润色文字时出错: ${error.message}</p>`;
                    result.style.display = 'block';
                }
            });
        }
        
        // 设置文字扩写表单
        function setupExpandForm() {
            const form = document.getElementById('expand-form');
            const loading = document.getElementById('expand-loading');
            const result = document.getElementById('expand-result');
            const output = document.getElementById('expand-output');
            const saveBtn = document.getElementById('save-expand');
            
            form.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                // 显示加载状态
                loading.style.display = 'block';
                result.style.display = 'none';
                
                try {
                    const originalText = form.querySelector('#expand-text').value;
                    const direction = form.querySelector('#expand-direction').value;
                    const length = form.querySelector('#expand-length').value;
                    
                    // 构建提示词
                    let prompt = `请对以下文字进行扩写：
原文：
${originalText}

扩写要求：
方向：${direction === 'details' ? '增加细节描写' : direction === 'examples' ? '添加事例说明' : direction === 'arguments' ? '扩充论点论据' : '增强情感表达'}
长度：${length === 'short' ? '简短扩写（约1.5倍原文长度）' : length === 'medium' ? '中等扩写（约2倍原文长度）' : '大幅扩写（约3倍原文长度）'}
要求：保持原文的核心意思，根据指定的扩写方向和长度要求进行扩写。`;
                    
                    // 根据长度设置token数量
                    let maxTokens = 1000;
                    if (length === 'long') maxTokens = 1500;
                    
                    // 调用API
                    const expandedText = await callDeepSeekAPI([
                        { role: 'system', content: '你是一位专业的写作助手，擅长对文本进行扩展和丰富。' },
                        { role: 'user', content: prompt }
                    ], maxTokens);
                    
                    // 显示结果
                    output.innerHTML = `<div style="margin-bottom: 20px;">
                        <h4>原文：</h4>
                        <p style="color: #666;">${originalText}</p>
                    </div>
                    <div>
                        <h4>扩写后：</h4>
                        <p>${expandedText}</p>
                    </div>`;
                    loading.style.display = 'none';
                    result.style.display = 'block';
                    
                    // 设置保存按钮
                    saveBtn.onclick = () => {
                        saveToHistory('扩写', `文字扩写：${originalText.substring(0, 20)}...`, expandedText);
                    };
                    
                    // 滚动到结果
                    result.scrollIntoView({ behavior: 'smooth' });
                } catch (error) {
                    loading.style.display = 'none';
                    output.innerHTML = `<p style="color: var(--danger-color);">扩写文字时出错: ${error.message}</p>`;
                    result.style.display = 'block';
                }
            });
        }
        
        // 保存到历史记录
        function saveToHistory(type, title, content) {
            let history = JSON.parse(localStorage.getItem('writingHistory')) || [];
            
            const newItem = {
                id: Date.now(),
                type: type,
                title: title,
                content: content,
                date: new Date().toLocaleString()
            };
            
            history.unshift(newItem);
            localStorage.setItem('writingHistory', JSON.stringify(history));
            
            // 更新历史记录显示
            displayHistory();
            
            // 显示保存成功的提示
            alert('已保存到历史记录！');
        }
        
        // 显示历史记录
        function displayHistory() {
            const historyList = document.getElementById('history-list');
            const history = JSON.parse(localStorage.getItem('writingHistory')) || [];
            
            if (history.length === 0) {
                historyList.innerHTML = '<p>暂无历史记录，开始创作后您的内容将保存在这里。</p>';
                return;
            }
            
            let html = '';
            history.forEach(item => {
                html += `<div class="history-item" data-id="${item.id}">
                    <div class="history-title">${item.title}</div>
                    <div class="history-preview">${item.content.substring(0, 50)}...</div>
                    <div class="history-date">${item.date} · ${item.type}</div>
                </div>`;
            });
            
            historyList.innerHTML = html;
            
            // 为历史记录项添加点击事件
            document.querySelectorAll('.history-item').forEach(item => {
                item.addEventListener('click', function() {
                    const id = parseInt(this.getAttribute('data-id'));
                    const historyItem = history.find(item => item.id === id);
                    
                    if (historyItem) {
                        // 根据类型切换到相应页面
                        let pageId = 'home';
                        if (historyItem.type === '作文') pageId = 'essay';
                        else if (historyItem.type === '藏头诗') pageId = 'acrostic';
                        else if (historyItem.type === '润色') pageId = 'polish';
                        else if (historyItem.type === '扩写') pageId = 'expand';
                        
                        showPage(pageId);
                        
                        // 显示历史内容
                        const outputId = `${pageId}-output`;
                        const resultId = `${pageId}-result`;
                        
                        document.getElementById(outputId).innerHTML = 
                            historyItem.type === '润色' || historyItem.type === '扩写' ? 
                            `<p>${historyItem.content}</p>` : 
                            historyItem.content;
                        
                        document.getElementById(resultId).style.display = 'block';
                        
                        // 滚动到结果
                        document.getElementById(resultId).scrollIntoView({ behavior: 'smooth' });
                    }
                });
            });
        }
        
        // 初始化显示历史记录
        displayHistory();
    </script>
</body>
</html>